<template>
  <div class="main_box">
    <CommonHeader title="请求支持"></CommonHeader>
    <van-form class="main_form" @submit="onSubmit">
      <div class="head">{{ quotaInfo.quotaName }}</div>
      <div :class="form.persons.length > 0 ? 'black' : ''">
        <van-field
          v-model="form.personNames"
          required
          input-align="left"
          name="personNames"
          label=""
          placeholder="请选择支持人员"
          maxlength="128"
          disabled
          :rules="[{ required: true, message: '' }]"
          @click="toChosePerson"
        >
          <i class="right_icon" slot="button"></i>
        </van-field>
      </div>
      <div class="form_title">支持理由</div>
      <van-field
        v-model="form.content"
        required
        input-align="left"
        name="content"
        placeholder="请输入支持理由"
        maxlength="300"
        type="textarea"
        show-word-limit
        rows="6"
        :rules="[{ required: true, message: '' }]"
      >
      </van-field>
      <div class="btn_box">
        <van-button round type="info" native-type="submit">提 交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import CommonHeader from "@/components/commonHeader";
import { Toast } from "vant";
export default {
  // eslint-disable-next-line
  name: "AskHelp",
  components: {
    CommonHeader,
  },
  data() {
    return {
      form: {
        persons: [],
        personNames: "",
        content: "",
      },
      quotaInfo: {},
    };
  },
  created() {
    const query = this.$route.query;
    this.quotaInfo = query || [];
    const selectList = JSON.parse(sessionStorage.getItem("persons"));
    if (selectList && selectList.length > 0) {
      this.form.persons = selectList;
      const arr = selectList.map((item) => {
        return item.name;
      });
      this.form.personNames = arr.join(",");
    }
  },
  methods: {
    toChosePerson() {
      this.$router.push({
        path: "/personList",
        query: {
          persons: JSON.stringify(this.form.persons),
        },
      });
    },
    // toChosePerson(){
    //     const userIds = this.form.persons.map(item=>{
    //       return item.userid
    //     })
    //     // eslint-disable-next-line
    //     dd.chooseContactWithComplexPicker({
    //       multiple:true,
    //       maxUsers:10,
    //       pickedUsers:userIds
    //     }).then(res => {
    //       const selectList = res.users
    //       if(selectList && selectList.length > 0){
    //           this.form.persons = selectList.map(item=>{
    //             return {
    //               ...item,
    //               id:item.userid
    //             }
    //           })
    //           const arr = selectList.map(item=>{
    //               return item.name
    //           })
    //           this.form.personNames = arr.join(',')
    //       }
    //     })
    // },
    onSubmit() {
      console.log(this.quotaInfo, "quotaInfo");
      const params = {
        quotaId: this.quotaInfo.quotaId,
        quotaName: this.quotaInfo.quotaName,
        employeeId: this.quotaInfo.employId,
        issueNo: this.quotaInfo.issueNo.slice(0, -2),
        empSupport: this.form.persons.map((v) => v.zid).join(","),
        content: this.form.content,
      };
      this.$api.helpSave(params).then((res) => {
        if (res.code === 200) {
          Toast.success("提交成功");
          setTimeout(() => {
            this.$router.go(-1);
          }, 1500);
        } else {
          Toast.fail(res.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.main_form {
  font-size: 14px;
  color: #333;
  padding: 15px;
}
.head {
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: left;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 0 16px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}
.form_title {
  width: 100%;
  text-align: left;
  padding: 10px 0;
}
.right_icon {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: url("../../assets/image/select_icon.png") no-repeat;
  background-size: 100% 100%;
}
.btn_box >>> .van-button {
  width: 90%;
  margin-top: 20px;
}
.black >>> .van-field__control:disabled,
.black >>> .van-field__control[disabled] {
  color: #333 !important;
  opacity: 1;
  -webkit-text-fill-color: #000;
  -webkit-opacity: 1;
}
</style>